<template>

  <el-container>
    <el-header>
    </el-header>
    <el-main>
      <vxe-toolbar custom :refresh="{query: loadTableData}">
        <template #buttons>
          <el-button size="small" type="primary" @click="formOperate('', 'add', '')">新增</el-button>
        </template>
      </vxe-toolbar>
      <vxe-table ref="dataTable" :data="tableData" size="small" border round>
        <vxe-column title="机构名称" field="name"></vxe-column>
        <vxe-column title="机构类型" field="type"></vxe-column>
        <vxe-column title="排序" field="sort"></vxe-column>
        <vxe-column title="" field=""></vxe-column>
        <vxe-column title="操作"></vxe-column>
      </vxe-table>
    </el-main>
    <sys-dept-form :method="formDialog.method" :visible.sync="formDialog.visible" :parent-id="formDialog.parentId"
                   :data-id="formDialog.dataId" @submit-success="loadTableData"/>
  </el-container>
</template>

<script>
import SysDeptForm from '@views/modules/system/dept/SysDeptForm.vue'
import SysDeptApi from '@views/modules/system/dept/SysDeptApi'

export default {
  name: 'SysDeptList',
  components: {
    SysDeptForm
  },
  mixins: [SysDeptApi],
  mounted () {
    this.loadTableData()
  },
  data () {
    return {
      tableData: [],
      formDialog: {
        visible: false,
        method: '',
        dataId: '',
        parentId: ''
      }
    }
  },
  methods: {
    formOperate (dataId, method, parentId) {
      this.formDialog.dataId = dataId
      this.formDialog.method = method
      this.formDialog.parentId = parentId
      this.formDialog.visible = true
    },
    loadTableData () {
      this.SysDeptApi.list().then(({ data }) => {
        this.tableData = data.list
      })
    }
  }
}
</script>

<style scoped>

</style>
